<template>
	<el-card>
		<div slot="header" class="clearfix">
			<h3>新增学生</h3>
		</div>
		<!-- 新增内容框 -->
		<el-form :model="addStudentData" label-width="100px">
			<el-form-item label="学生姓名：">
				<el-input v-model="addStudentData.name"></el-input>
			</el-form-item>
			<el-form-item label="学生年龄：">
				<el-input v-model="addStudentData.age"></el-input>
			</el-form-item>
			<el-form-item label="学生性别：">
				<el-radio-group v-model="addStudentData.gender">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="学生专业：">
				<el-select v-model="addStudentData.subjectsId" placeholder="请选择专业">
					<el-option v-for="item in subjectsData" :key="item._id" :label="item.name" :value="item._id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="学生班级：">
				<el-select v-model="addStudentData.classesId" placeholder="请选择班级">
					<el-option v-for="item in classesData" :key="item._id" :label="item.name" :value="item._id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="上传图片：">
				<el-upload class="avatar-uploader" action="http://47.98.128.191:3001/images/uploadImages"
					:show-file-list="false" :on-success="handleAvatarSuccess">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addOneStudentSubmit(addStudentData)">确认新增</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	// 引入学生仓库
	const {
		mapActions: studentsMapActions,
	} = createNamespacedHelpers(
		"students"
	);
	// 引入班级仓库
	const {
		mapActions: classesMapActions,
	} = createNamespacedHelpers(
		"classes"
	);
	// 引入专业仓库
	const {
		mapState: subjectsMapState,
		mapActions: subjectsMapActions,
	} = createNamespacedHelpers(
		"subjects"
	);
	export default {
		data() {
			return {
				addStudentData: {
					name: "",
					age: "",
					gender: "男",
					subjectsId: "",
					classesId: "",
					image: "",
				},
				classesData: [],
				imageUrl: '',
			};
		},
		watch: {
			'addStudentData.subjectsId'(subjectsId) {
				this.getClassData(subjectsId);
			}
		},
		computed: {
			...subjectsMapState(['subjectsData']),
		},
		mounted() {
			// 获取专业
			this.getSubjects();
		},
		methods: {
			...studentsMapActions(["addOneStudent"]),
			...classesMapActions(['getClassesBySubjectsId']),
			...subjectsMapActions(['getSubjects']),
			// 获取班级列表数据
			async getClassData(subjectsId) {
				const res = await this.getClassesBySubjectsId(subjectsId)
				if (res.code) {
					this.classesData = res.data.result;
				}
			},
			// 上传头像图片
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				this.addStudentData.image = "http://47.98.128.191:3001" + res.data[0];
			},
			// 新增一个学生
			async addOneStudentSubmit(addData) {
				const res = await this.addOneStudent(addData);
				if (res.code) {
					this.$message({
						message: '新增成功！',
						type: 'success',
						center: true,
					});
				} else {
					this.$message({
						message: '新增失败！',
						type: 'error',
						center: true,
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-card {

		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}

		.clearfix:after {
			clear: both
		}

		.el-form {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.el-form-item {
				width: 400px;

				.el-button {
					margin-top: 30px
				}

				;

				.avatar-uploader {
					width: 100px;
					border: 1px dashed #666;
					border-radius: 6px;
					cursor: pointer;
					position: relative;
					overflow: hidden;
				}

				.avatar-uploader:hover {
					border-color: #409EFF;
				}

				.avatar-uploader-icon {
					font-size: 28px;
					color: #8c939d;
					width: 100px;
					height: 100px;
					line-height: 100px;
					text-align: center;
				}

				.avatar {
					width: 100px;
					height: 100px;
					display: block;
				}
			}
		}
	}
</style>